<template>
    <div>
        <h1>这里是父组件</h1>
        <el-alert :title="msg" />
        <el-row :gutter="20">
            <el-col :span="12">
                <Child :msg="msg" @child-click="handlerchildClick"></Child>
            </el-col>

            <el-col :span="12">
                <el-card>
                    <h1>这里是待办清单</h1>
                    <ToDo @to-list="addList" @remove-all="remove"></ToDo>
                    <ul class="list-box">
                        <li v-for="(item, index) in list">{{ index + 1 }}={{ item }}</li>
                    </ul>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>
import { ref } from 'vue'
import Child from './components/Child.vue'
import ToDo from './components/ToDo.vue'

export default {
    name: 'Event',
    components: {
        Child,
        ToDo
    },
    setup() {
        const msg = ref("我是父组件的值")
        const list = ref([])
        const handlerchildClick = function (value) {
            msg.value = value
        }
        const addList = function (text) {
            list.value.push(text)
        }
        const remove = function () {
            list.value=[]
        }
        return {
            msg,
            list,
            handlerchildClick,
            addList,
            remove
        }
    }
}

</script>
  
<style scoped>
.list_box{
    height: 280px;
    padding: 20px;
    background-color: #f0f0f0;
}
li{
    list-style:none;
}
</style>